<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册</title>
    <link rel="stylesheet" href="css/login.css">
    <style>
    /* 新增重复密码样式 */
    .confirm-pwd::after { content: "🔒"; }
    .password-strength {
        font-size: 12px;
        color: #666;
        margin-top: 5px;
    }
    </style>
</head>
<body>
    <div class="auth-box">
        <h2 class="auth-title">用户注册</h2>
        
        <form>
            <!-- 用户名 -->
            <div class="form-group username">
                <label>用户名</label>
                <input type="text" class="input-field" placeholder="4-16位字母/数字组合">
                <div class="error-msg">用户名格式不正确</div>
            </div>

            <!-- 密码 -->
            <div class="form-group password">
    <label>设置密码</label>
    <input type="password" class="input-field" 
       placeholder="6-18位字符" 
       id="password"
       maxlength="18"
       autocomplete="new-password">
   <span class="show-pwd-btn">👁️</span>
    
    <!-- 密码强度指示器 -->
    <div class="password-strength">
    <div class="error-msg">密码强度不足</div>
  
    <div class="strength-indicator"></div>
    <div class="strength-text"></div>
</div>
</div>

            <!-- 重复密码 -->
            <div class="form-group confirm-pwd">
                <label>重复密码</label>
                <input type="password" class="input-field" placeholder="请再次输入密码">
                <div class="error-msg">两次密码不一致</div>
            </div>

            <!-- 手机号 -->
            <div class="form-group phone">
                <label>手机号码</label>
                <input type="tel" class="input-field" placeholder="11位中国大陆手机号" 
                       pattern="[0-9]{11}" maxlength="11">
                <div class="error-msg">手机号格式错误</div>
            </div>

            <!-- 用户协议 -->
            <div class="terms">
                <input type="checkbox" id="agree" required>
                <label for="agree">我已阅读并同意</label>
                <a href="../用户协议.txt">《用户服务协议》</a>
            </div>

            <!-- 注册按钮 -->
            <!-- 修改按钮结构 -->
<button type="submit" class="auth-btn" onclick="window.location.href='login.html'">立即注册</button>
            
            <!-- 已有账号 -->
            <div class="auth-links">
                <span>已有账号？</span>
                <a href="login.html">立即登录</a>
            </div>
        </form>
    </div>

    <script>
  // 密码强度检测
function checkPasswordStrength(pwd) {
    const hasLower = /[a-z]/.test(pwd);
    const hasUpper = /[A-Z]/.test(pwd);
    const hasNumber = /\d/.test(pwd);
    const hasSpecial = /[!@#$%^&*]/.test(pwd);
    const length = pwd.length;

    // 最大长度限制
    if (length > 18) return -1;

    // 强度分级
    if (length === 0) return 0;
    if (length < 6) return 1;
    if (length <= 8) {
        return (hasLower && hasUpper) && (hasNumber || hasSpecial) ? 2 : 1;
    }
    if (length <= 18) {
        return (hasLower && hasUpper && hasSpecial) ? 3 : 2;
    }
}

// 更新输入事件处理
document.getElementById('password').addEventListener('input', function(e) {
    const pwd = e.target.value;
    const strengthLevel = checkPasswordStrength(pwd);
    const container = this.closest('.form-group');
    const indicator = container.querySelector('.strength-indicator');
    const textLabel = container.querySelector('.strength-text');

    // 清除无效状态
    container.classList.remove('invalid');
    
    // 更新强度显示
    const strengthMap = [
        {width: '0%', color: '#eee', text: ''},         // 0级
        {width: '25%', color: '#ff4444', text: '弱'},   // 1级
        {width: '50%', color: '#ffa500', text: '中'},    // 2级
        {width: '100%', color: '#52c41a', text: '强'}    // 3级
    ];

    const currentStrength = strengthLevel === -1 ? 0 : strengthLevel;
    const {width, color, text} = strengthMap[currentStrength];
    
    indicator.style.width = width;
    indicator.style.backgroundColor = color;
    textLabel.textContent = text;
    textLabel.style.color = color;

    // 显示超长警告
    if (pwd.length > 14) {
        container.classList.add('invalid');
        container.querySelector('.error-msg').textContent = '密码长度不能超过18位';
    } else {
        container.querySelector('.error-msg').style.display = 'none';
    }
});
    // 同步检测重复密码
    document.querySelector('.show-pwd-btn').addEventListener('click', function() {
    const pwdField = this.previousElementSibling;
    const isVisible = pwdField.type === 'text';
    
    // 切换输入框类型
    pwdField.type = isVisible ? 'password' : 'text';
    
    // 更新按钮图标
    this.textContent = isVisible ? '👁️' : '🔒';
    
    // 添加视觉反馈
    this.style.transform = isVisible ? 'scale(1)' : 'scale(1.2)';
    setTimeout(() => {
        this.style.transform = 'scale(1)';
    }, 200);
});

// 优化：当输入框获得焦点时提升按钮可见性
document.getElementById('password').addEventListener('focus', function() {
    document.querySelector('.show-pwd-btn').style.opacity = '1';
});

// 优化：当输入框失去焦点时降低按钮可见性
document.getElementById('password').addEventListener('blur', function() {
    document.querySelector('.show-pwd-btn').style.opacity = '0.6';

  // 伪代码：这里应添加实际注册逻辑
const isValid = validateForm(); // 需要实现验证函数
  
 if(isValid) {
        // 注册成功后跳转
        window.location.href = 'login.html?from=register';
    }
});

    </script>
</body>
</html>